<template>
    <div class="close">
        <!-- 线性渐变 -->
        <div class="gradient"></div>
        <div class="nav">
            <!-- <navback left-text="返回 >" title="订单结算"></navback> -->
            <!-- <van-nav-bar title="订单结算" left-text="返回" left-arrow @click-left = "onClickLeft" /> -->
            <van-icon name="arrow-left" class="left" @click="onClickLeft" />
            <div class="title">订单结算</div>
        </div>
        <div class="content">
            <div class="bulge">外卖</div>

            <div class="profile">
                <!-- <div class="takeOut">外卖配送</div> -->
                <div class="chooseAddress" @click="toAddress">选择收货地址 ></div>
                <div class="address" v-if="customAddress == true">{{ AddressInfo.province }}{{ AddressInfo.city }}{{ AddressInfo.county }}{{ AddressInfo.addressDetail }}</div>
                <div class="address" v-else-if="customAddress == false">{{ AddressInfo.address }}</div>

                <div class="inOnTime-box">
                    <!-- <div class="inOnTime">立即送出</div> -->
                    <div class="time">大约12:10送达 ></div>
                </div>
            </div>

            <!-- 订单信息 -->
            <div class="order_info">
                <!-- <div class="title">订单信息</div> -->
                <div class="order_content" v-for="(item, index) in carlist" :key="index">
                    <div class="order-box">
                        <div class="img-box">
                            <img :src="item[0].Img" class="img-auto" />
                        </div>
                        <div class="name-rule">
                            <div class="name">{{ item[0].name }}</div>
                            <div class="rule">{{ item[0].shuju[0] }}/{{ item[0].shuju[1] }}/{{ item[0].shuju[2] }}</div>
                        </div>
                        <div class="count">x {{ item[0].count }}</div>
                        <div class="price">&yen; {{ item[0].price }}</div>
                    </div>
                </div>
                <div class="total-box">
                    <div class="totaltext">共{{ carlist[0][0].totalcount }}件</div>
                    <div class="total">合计:</div>
                    <div class="totalPrice">&yen; {{ carlist[0][0].totalPrice }}</div>
                </div>
            </div>
            <!-- 支付方式 -->
            <div class="payment-box">
                <div class="payment">支付方式</div>
                <div class="wei-zhi">
                    <div class="wei">
                        <div class="img-box">
                            <van-icon name="wechat-pay" class="weiicon" />
                        </div>
                        <div class="text">微信</div>
                    </div>
                    <div class="zhi">
                        <div class="img-box">
                            <van-icon name="alipay" class="zhiicon" />
                        </div>
                        <div class="text">支付宝</div>
                    </div>
                    <van-radio-group v-model="radio" class="radio-box">
                        <van-radio name="1" class="radio" checked-color="#e4393c"></van-radio>
                        <van-radio name="2" checked-color="#e4393c"></van-radio>
                    </van-radio-group>
                </div>
            </div>
            <div class="remark-box">
                <div class="remark">备注</div>
                <div class="input-box" @click="toRemark">
                    <input type="text" v-model="RemarkVal" placeholder="暂不支持通过备注定制口味" readonly autofocus maxlength="50" ref="input" />
                </div>
                <div class="gt"><van-icon name="arrow" /></div>
            </div>
        </div>
        <div class="foot">
            <div class="left">
                <div class="net">实付:</div>
                <div class="totalPrice">&yen;{{ carlist[0][0].totalPrice }}</div>
            </div>
            <div class="right" @click="showPopup">
                <div class="affirm" @click="pay">确认支付</div>
            </div>
        </div>
        <!-- 弹出层盒子 -->
        <div class="Popup">
            <!-- 弹出层 -->
            <van-popup v-model="show" position="bottom" :style="{ height: '60%' }">
                <div class="tip">请输入密码</div>
                <div class="password" v-if="clickpay">
                    <!-- 密码框 -->
                    <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
                    <!-- 数字键盘 -->
                    <van-number-keyboard v-model="value" :show="showKeyboard" random-key-order /></div
            ></van-popup>
        </div>
    </div>
</template>

<script>
// import { json } from 'body-parser'
import { Toast } from "vant";
import navback from "../components/Navback.vue";
export default {
    name: "Close",
    components: {
        navback,
    },
    data() {
        return {
            // 地址信息
            AddressInfo: "",
            // 购物车数据
            carlist: "",
            // 支付方式
            radio: "1",
            // 没有新建地址
            customAddress: "",
            // 立即购买数据
            NowBuy: "",
            NowBuylist:[],
            // 备注信息
            RemarkVal: "",
            // 控制弹出popup弹出层后显示密码框与数字框
            clickpay: false,
            // 密码框
            // 密码值
            value: "",
            // 控制数字键盘数字键盘
            showKeyboard: true,
            //  控制popup弹出层
            show: false,
        };

    },
    // 监听密码的值
    watch: {
    value(value) {
        // 输入6位密码,但是错误
      if (value.length === 6 && value !== '666666') {
       Toast("密码错误")
    //    输入六位密码,且正确
      } else if(value.length === 6&&value =='666666'){
        // 收起弹出层(是popup弹出层 不是密码框跟数字框)
        this.show = false
        // 调用去订单页面方法
        this.toOrder()
      }
    }
    },
    methods: {
        // 弹出框
        showPopup() {
            this.show = true;
        },
        // 返回
        onClickLeft() {
            this.$router.push({
                name: "Car",
            });
        },
        // 跳转地址管理
        toAddress() {
            this.$router.push({
                name: "Address",
                // query:{carlist:JSON.stringify(this.carlist)}
            });
            localStorage.setItem("Carlist", JSON.stringify(this.carlist));
        },
        // 弹出密码框数字框
        pay() {
            this.clickpay = true;
           
        },
        // 输入密码正确,跳转订单界面
        toOrder(){
            Toast("支付成功");
            // 跳转订单管理页面
            this.$router.push({
                name: "Order",
            });
            let d = new Date();
            this.carlist[0][0].currentTime = d.toLocaleString();
            console.log(this.carlist);
            // 存到本地存储
            localStorage.setItem("Carlist", JSON.stringify(this.carlist));
        },
        // 跳转备注界面
        toRemark() {
            this.$router.push({
                name: "Remark",
            });
        },
    },
    created() {
        this.$nextTick(() => {
            // console.log(this.$refs.input);
        });
        // 接收备注页面的内容
        if (this.$route.query.value !== "") {
            this.RemarkVal = this.$route.query.value;
            // console.log(this.RemarkVal);
            // v-model给input赋值
        }

        // 接收立即购买的数据
        // if(JSON.parse(this.$route.query.Product)!==undefined){

        //     this.NowBuy = JSON.parse(this.$route.query.Product)
        //     this.NowBuylist.push(this.NowBuy)
        // }
        let d = new Date();
        // console.log(d.toLocaleString());
        // 获取地址管理页面传来的地址信息
        // if(this.$route.query.addressInfo){
        // console.log(this.$route.query.addressInfo);
        if (this.$route.query.addressInfo !== undefined) {
            this.customAddress = true;

            console.log(3333);
            let AddressInfo = JSON.parse(this.$route.query.addressInfo);

            // this.AddressInfo = JSON.parse(this.$route.query.addressInfo)

            this.AddressInfo = AddressInfo;
            console.log(this.AddressInfo);
        } else if (this.$route.query.list !== undefined) {
            this.customAddress = false;
            console.log(4444);
            let AddressInfo = JSON.parse(this.$route.query.list);

            // this.AddressInfo = JSON.parse(this.$route.query.addressInfo)

            this.AddressInfo = AddressInfo;
            console.log(this.AddressInfo);
        }
        // 接受地址管理传来的carlist
        // this.carlist = JSON.parse( this.$route.query.carlist)
        // }
        // 将订单数据传入本地存储
        this.carlist = JSON.parse(localStorage.getItem("Carlist"));

        // 获取购物车页面的商品列表
        // if(this.$route.query.carlist){
        if (this.$route.query.carlist == undefined) {
            console.log(111);
            return
        //    this.carlist = this.NowBuylist
        } else {
            console.log(2222);
            let carlists = JSON.parse(this.$route.query.carlist);
            //    console.log(this.$route.query.carlist);
            // console.log(carlists);
            // 将总价除100
            carlists[0][0].totalPrice /= 100;
            this.carlist = carlists;
            console.log(this.carlist);
        }
        // }
    },
};
</script>

<style lang="less" scoped>
.close {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #edf2f2;
    .Popup{
        .van-popup--bottom{
            background-color: #eef1f1;
        }
    }
    .tip{
            width: 100%;
            // background-color: pink;
            height: 50px;
            text-align: center;
            font-size: 16px;
            line-height: 50px;
            font-weight: 16px;
        }
    .password{
       
        .van-password-input{
            margin-top: 27px;
        }
    }

    .remark-box {
        width: 350px;
        height: 50px;
        margin: 0 auto;
        margin-top: 10px;
        border-radius: 10px;
        display: flex;
        background-color: #fff;
        .remark {
            width: 31px;
            height: 100%;
            color: #444;
            font-size: 15px;
            line-height: 50px;
            margin-left: 10px;
        }
        .input-box {
            width: calc(100% - 61px);
            height: 100%;
            input {
                width: 100%;
                height: 100%;
                text-align: end;
                border: none;
                outline: none;
                font-size: 14px;
                color: #686969;
            }
        }
        .gt {
            width: 17px;
            line-height: 47px;
            font-size: 18px;
            color: #9ca0a0;
            text-align: end;
            padding: 2.5px 10px 0 3px;
        }
    }
    .gradient {
        width: 100%;
        height: 160px;
        background-image: linear-gradient(red, white);
        position: absolute;
        top: 0;
        left: 0;
    }
    .content {
        width: 100%;
        height: calc(100% - 109px);
        padding-top: 1px;
        overflow-y: auto;
        z-index: 999;
        position: fixed;
        .bulge {
            color: red;
            width: 90px;
            height: 0.8rem;
            border-top-left-radius: 10px;
            border-top-right-radius: 40px;
            position: relative;
            top: 10px;
            left: 12.5px;
            background-color: white;
            z-index: 999;
            font-size: 14px;
            font-weight: bolder;
            padding: 10px 0 0 10px;
        }
        .order_info {
            width: 350px;
            height: auto;
            background-color: #fff;
            margin: 13px auto;
            border-radius: 10px;
            // .title{
            //     height: 20px;
            //     font-size: 16px;
            //     font-weight: 550;
            //     margin: 0 0 10px 130px;
            // }
            .total-box {
                width: 350px;
                height: 30px;
                display: flex;
                line-height: 30px;

                .totaltext {
                    font-size: 14px;
                    margin: 0 20px 0 193px;
                }
                .total {
                    margin-right: 5px;
                }
                .totalPrice {
                    font-size: 16px;
                    font-weight: 550;
                    color: #e4393c;
                    font-weight: 550;
                    font-size: 16px;
                }
            }
            .order_content {
                width: 100%;
                height: auto;
                padding: 10px 0 0 0px;

                .order-box {
                    width: 350px;
                    height: 50px;
                    display: flex;
                    margin-bottom: 15px;
                    .img-box {
                        width: 60px;
                        height: 60px;
                        background-color: pink;
                        .img-auto {
                            width: 100%;
                            display: block;
                        }
                    }
                }

                .name-rule {
                    width: 150px;
                    height: 50px;
                    .name {
                        font-size: 16px;
                        font-weight: 550;
                        margin-bottom: 3px;
                        padding-left: 4px;
                    }
                    .rule {
                        padding: 3px 0 0 4px;
                        color: #686969;
                    }
                }
                .count {
                    margin: 19px 80px 0 20px;
                    width: 20px;
                    height: 20px;
                    position: relative;
                    top: 27px;
                    left: -163px;
                }
                .price {
                    width: 20px;
                    height: 20px;
                    margin: 5px 0 0 -20px;
                    font-size: 14px;
                    font-weight: 550;
                }
            }
        }
        .payment-box {
            width: 350px;
            height: 100px;
            margin: 0 auto;
            margin-top: -3px;
            border-radius: 10px;
            background-color: #fff;
            .payment {
                height: 30px;
                font-size: 16px;
                font-weight: 550;
                margin-top: 10px;
                padding: 5px 0 0 5px;
            }
            .wei-zhi {
                height: 60px;
                clear: both;
                .wei,
                .zhi {
                    height: 30px;
                    line-height: 30px;
                    font-size: 14px;
                    display: flex;
                    .img-box {
                        width: 0.8rem;
                        height: 100%;
                        margin-right: 0.13333rem;
                        text-align: center;
                        font-size: 22px;
                    }
                    .weiicon {
                        color: green;
                    }
                    .zhiicon {
                        color: blue;
                    }
                    .text {
                        font-size: 16px;
                    }
                }
                .radio-box {
                    float: right;
                    margin: -52px 35px 0 0px;
                    .radio {
                        margin-bottom: 7px;
                    }
                }
            }
        }
        .profile {
            width: 350px;
            height: 120px;
            background-color: #fff;
            margin: -5px auto;
            border-radius: 10px;
            box-shadow: 0 3px 1px #e2ebeb;
            // .takeOut{
            //     width: 100%;
            //     height: 30px;
            //     padding-top: 20px;
            //     font-size: 16px;
            //     font-weight: 550;
            //     margin-left: 10px;
            // }
            .chooseAddress {
                width: 100%;
                height: 30px;
                font-size: 16px;
                font-weight: 550;
                margin-left: 10px;
                padding-top: 20px;
            }
            .address {
                width: 97%;
                height: 40px;
                background-color: #fff;
                margin-left: 10px;
                font-size: 14px;
                color: #898f8f;
            }
            .inOnTime-box {
                width: 100%;
                height: 30px;
                display: flex;
                margin-left: 10px;

                // .inOnTime{
                //     width: 230px;
                //     height: 30px;
                //     font-size: 16px;
                //     font-weight: 550;
                // }
                .time {
                    font-size: 13px;
                    color: #e4393c;
                    margin-left: 230px;
                }
            }
        }
    }

    .nav {
        display: flex;
        z-index: 999;
        position: relative;
        width: 100%;
        height: 50px;
        background-color: #f85555;
        .left {
            font-size: 22px;
            color: #fff;
            margin: 15px 110px 0 10px;
        }
        .title {
            margin: 15px 0 0 5px;
            font-size: 16px;
            color: #fff;
        }
    }
    .foot {
        width: 100%;
        height: 60px;
        position: fixed;
        bottom: 0;
        left: 0;
        border-top: 1px solid #686969;
        display: flex;
        .left {
            width: 70%;
            height: 60px;
            background-color: #fff;
            display: flex;
            .net {
                padding: 20px 0 0 20px;
                font-size: 14px;
            }
            .totalPrice {
                padding: 23px 0 0 10px;
                font-size: 14px;
                font-weight: 700;
            }
        }
        .right {
            width: 30%;
            height: 60px;
            background-color: red;
            .affirm {
                width: 112px;
                height: 60px;
                background-color: #e4393c;
                text-align: center;
                line-height: 60px;
                color: #fff;
                font-size: 16px;
            }
        }
    }
}
</style>
